<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>拉出菜单</title>
    <link rel="stylesheet" href="./css/common.css">
    <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
  <script src="./fonts/iconfont.js"></script>
</head>

 <!-- Demo styles -->
 <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
    }

    .menu {/* 拉出菜单 */
      min-width: 100px;
      width: 70%;
      max-width: 320px;
      background-color: rgba(254, 251, 251, 0.91);
      color: #000;
    }
    .menu h4{/* 用户名 */
    position: absolute;
      margin-top: 1vw;
      margin-left:12vw;
    }
    .menu p{/* 我的背包 */
        position: absolute;
      margin-top: 8vw;
      margin-left: 12vw;
      font-size: 2vw;
      background-color: #ffffff;
      height: 3vw;
    }
    .menu .tou{
        border-radius: 50%;  
        margin-top: 1vw;
        margin-left: 2vw;
    }
    .menu .img{
        position: absolute;
        margin-top: 18vw;
        margin-left: 1vw;
        border-radius: 5vw;
    }
    .menu .img1{
        position: absolute;
        margin-top: 138vw;
    }
    .menu .p1{
        position: absolute;
        margin-top: 170vw;
        margin-left: 20vw;
        color: gray;
        font-size: 3vw;
        
    }
    .show .p4{/* 页面动态 第一行字 */
			      display: block;
            position: relative;
            left: 34vw;
            top: 53vw;
            font-size: 3vw;
        }
        .show .p5{/* 页面动态 第二行字 */
            display: block;
            position: relative;
            left: 33vw;
            top: 54vw;
            font-size: 2vw;
            color: #5b565684;
        }
        .show .tu{
            display: block;
            position: relative;
            top: 52vw;
            left: 33vw;
        }
        ul{
        padding: 0;
        margin: 0;
        list-style: none;
   }
   ul,p,body{
       padding: 0;
       margin: 0;
   }
   .bnav{
    /* 固定在下面 */
       position: fixed;
       left: 0;
       bottom: 0;
       width: 100%;
       z-index: 9;
       background-color: #ffffff;
       border-top: 0.2vw solid #eee;
   }
   body{
    margin-bottom: 50vw
   }
   .bnav>ul{
    display: flex;
   }
   .bnav li{
    width: 20%;
    display: flex;
    justify-content: center;/* 设置容器属性 */
   }
   .bnav div{
    position: relative;
   }
   .bnav svg{
     font-size: 5vw;
     margin: 3px 0;
   }
   .bnav p{
    font-size: 14px;
    margin: 3px 0; 
    text-align: center;
    color: #746d6d;
   }
   .bnav .p1{
    color: green;
   }
   .icon {
         width: 1em;
        height: 1em;
        vertical-align: -0.15em;
         fill: currentColor;
        overflow: hidden;
        background-color: transparent; /* 确保背景透明 */ 
 
    }
    .t-title {  /* 横线*/
			height: 22vw;
      position: relative;
      width: 100%;
      left: -15vw;
			border-bottom: 1px solid #eee;
		}
    .t-title .cur {/* 文字 */
			color: #5b565684;
			font-weight: bold;
      position: relative;
      top: 15vw;
      left: -35vw;
      font-size: 4vw;
      line-height: 1.5;
      border-bottom: 3px solid #000;
		}
    .t-title .cur1 {/* 文字 */
			color: #000;
			font-weight: bold;
      position: relative;
      top: 15vw;
      left: -25vw;
      font-size: 4vw;
		}
   /*  .k{
      background-color: #eee;
            border-radius: 10px;
            flex-grow: 1;
            display: flex;
            align-items: center;
            padding: 5px;
            position: fixed;
            width: 65%;
            margin-left: -160px;
    }
    .k p{
      font-size: 15px;
      color: #848484;
    } */

    #S img{
      width: 100%;
      position: fixed;
      left:0vw;
    }
    .bnav2{
    /* 上面两个图案 ************************************/
    position: fixed;  
  top: 5px;  
  right: 15px;  
  width: auto;  
  height: auto;  
  max-width: 50px;  
  max-height: 50px;  
  font-size: 25px;
}
    
    .content {
      width: 100%;
    }

    .menu-button {
      position: absolute;
      top: 0px;
      left: 0px;

      padding: 1px;

      cursor: pointer;

      -webkit-transition: 0.3s;
      transition: 0.3s;

      background-color: green;

      /* margin: 14px;
			border-radius: 5px; */
    }

    .menu-button .bar:nth-of-type(1) {
      margin-top: 0px;
    }

    .menu-button .bar:nth-of-type(3) {
      margin-bottom: 0px;
    }

    .bar {
      position: relative;
      display: block;

      width: 50px;
      height: 5px;

      margin: 10px auto;
      background-color: #fff;

      border-radius: 10px;

      -webkit-transition: 0.3s;
      transition: 0.3s;
    }

    .menu-button:hover .bar:nth-of-type(1) {
      -webkit-transform: translateY(1.5px) rotate(-4.5deg);
      -ms-transform: translateY(1.5px) rotate(-4.5deg);
      transform: translateY(1.5px) rotate(-4.5deg);
    }

    .menu-button:hover .bar:nth-of-type(2) {
      opacity: 0.9;
    }

    .menu-button:hover .bar:nth-of-type(3) {
      -webkit-transform: translateY(-1.5px) rotate(4.5deg);
      -ms-transform: translateY(-1.5px) rotate(4.5deg);
      transform: translateY(-1.5px) rotate(4.5deg);
    }

    .cross .bar:nth-of-type(1) {
      -webkit-transform: translateY(15px) rotate(-45deg);
      -ms-transform: translateY(15px) rotate(-45deg);
      transform: translateY(15px) rotate(-45deg);
    }

    .cross .bar:nth-of-type(2) {
      opacity: 0;
    }

    .cross .bar:nth-of-type(3) {
      -webkit-transform: translateY(-15px) rotate(45deg);
      -ms-transform: translateY(-15px) rotate(45deg);
      transform: translateY(-15px) rotate(45deg);
    }

    .cross:hover .bar:nth-of-type(1) {
      -webkit-transform: translateY(13.5px) rotate(-40.5deg);
      -ms-transform: translateY(13.5px) rotate(-40.5deg);
      transform: translateY(13.5px) rotate(-40.5deg);
    }

    .cross:hover .bar:nth-of-type(2) {
      opacity: 0.1;
    }

    .cross:hover .bar:nth-of-type(3) {
      -webkit-transform: translateY(-13.5px) rotate(40.5deg);
      -ms-transform: translateY(-13.5px) rotate(40.5deg);
      transform: translateY(-13.5px) rotate(40.5deg);
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <div class="swiper">
    <div class="swiper-wrapper">
       
      <div class="swiper-slide menu">
       <div class="tou"><img src="./images/头2.jpg" width="30" height="40"></div> 
       <h4>豆友</h4>
        <p>我的背包</p>
        <span class="img"><img src="./images/菜单.jpg" width="250" height="330"></span> 
        <span class="img1"><img src="./images/豆瓣功能.jpg" width="250" height="110"></span> 
        <p class="p1"><strong>豆瓣</strong> 证照信息></p>
      </div>
      <div class="swiper-slide content">
        <div class="menu-button">
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
        </div>
        <div class="tc show">
          <li>
              <span class="tu"><img src="./images/豆瓣猫.jpg" width="90"></span>
          </li>
          <li>
              <span class="p4">没有任何动态</span>
          </li>
          <li>
              <span class="p5">关注豆友，查看他们的最新动态</span>
          </li>
      </div>
      <nav class="bnav">
        <ul>
            <li>
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shouye-tianchong-copy"></use>
                    </svg>
                    <p class="p1">首页</p>
                    
                </div>
                <li>
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shouzhang"></use>
                        </svg>
                        <p>书影音</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-hongwai"></use>
                        </svg>
                        <p>小组</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-buildings_small-shop"></use>
                        </svg>
                        <p>市集</p>
                    </div>
                </li>
                <li>
                    <div>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wode1"></use>
                        </svg>
                        <p>我</p>
                    </div>
                </li>
            </li>
        </ul>
    </nav>
             <div class="t-title">
			          <span class="cur">动态</span>
		          	<span class="cur1">推荐</span>
		        </div>
         <!--    <li>
              <div class="k">
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-sousuo1-copy"></use>
                  </svg>   <p>照明商店</p>
               
              </div>
            </li> -->
            <div id="S">
              <img src="./images/拉出搜索框.jpg">
            </div>

          <!--   <nav class="bnav2">  
              <ul>
                  <li>
                      <div>
                          <svg class="icon" aria-hidden="true">
                              <use xlink:href="#icon-envelope"></use>
                          </svg>
                      </div>
                  </li>
                  
              </ul>
          </nav> -->

      </div>
    </div>
  </div>

  <!-- Swiper JS -->
  <script src="./swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var menuButton = document.querySelector('.menu-button');
    var openMenu = function () {
      swiper.slidePrev();
    };
    var swiper = new Swiper('.swiper', {
      slidesPerView: 'auto',
      initialSlide: 1,
      resistanceRatio: 0,
      slideToClickedSlide: true,
      on: {
        slideChangeTransitionStart: function () {
          var slider = this;
          if (slider.activeIndex === 0) {
            menuButton.classList.add('cross');
            // required because of slideToClickedSlide
            menuButton.removeEventListener('click', openMenu, true);
          } else {
            menuButton.classList.remove('cross');
          }
        },
        slideChangeTransitionEnd: function () {
          var slider = this;
          if (slider.activeIndex === 1) {
            menuButton.addEventListener('click', openMenu, true);
          }
        },
      },
    });
  </script>
</body>
</html>